<template>
  <!-- 条件节点 -->
  <div>
    <div class="container">
      <div v-if="node.expressionList.length > 1">
        <div class="condition-line" />
        <div class="condition-type" @click="onChangeConditionType">{{ conditionTypeName }}</div>
      </div>
      <div class="condition">
        <div v-for="(item, index) in node.expressionList" :key="index">
          <div class="condition-item">
            <div class="condition-item-property">
              <ElSelect v-model="item.column" size="small" filterable>
                <ElOption
                  v-for="field in fieldList"
                  :key="field.fieldCode"
                  :label="field.fieldName"
                  :value="field.fieldCode"
                ></ElOption>
              </ElSelect>
            </div>
            <div class="condition-item-condition">
              <ElSelect v-model="item.condition" size="small">
                <ElOption
                  v-for="condition in conditionList"
                  :key="condition.value"
                  :label="condition.label"
                  :value="condition.value"
                />
              </ElSelect>
            </div>
          </div>
          <div class="condition-item">
            <div class="condition-item-value">
              <ElInput v-if="item.condition !== '==null' && item.condition !== '!=null'" v-model="item.value" size="small" />
            </div>
            <div class="condition-item-menu" @click="onDeleteCondition(index)">
              <ElButton type="danger" size="small" link>
                <Icon icon="delete"></Icon>
              </ElButton>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="condition-button">
      <ElButton type="text" @click="onAddCondition">新增条件 </ElButton>
    </div>
  </div>
</template>

<script setup lang="ts" name="conditionPanel">
import { computed, inject, ref, watch } from "vue";
import { ElSelect, ElOption, ElInput, ElButton } from "element-plus";
import { Icon } from "@/components/Icon";
import entityApi from "@/views/micro/entity/api";
const props = defineProps({
  node: {
    type: Object
  }
});
const designer = inject("designer");
const conditionList = ref([
  { label: "等于", value: "eq" },
  { label: "不等于", value: "neq" },
  { label: "大于", value: "gt" },
  { label: "大于等于", value: "geq" },
  { label: "小于", value: "lt" },
  { label: "小于等于", value: "leq" },
  { label: "模糊", value: "like" },
  { label: "左模糊", value: "like_left" },
  { label: "右模糊", value: "like_right" },
  { label: "为空", value: "is_null" },
  { label: "不为空", value: "not_null" }
]);
const fieldList = ref([]);
watch(
  () => designer.value.global.entityId,
  async id => {
    if (id) {
      const res = (await entityApi.listField({ id })) || [];
      fieldList.value = res;
    } else {
      fieldList.value = [];
    }
  },
  {
    immediate: true
  }
);
const onChangeConditionType = () => {
  props.node!.isAnd = !props.node!.isAnd;
};
const onDeleteCondition = index => {
  if (props.node!.expressionList.length === 1) {
    return;
  }
  props.node!.expressionList.splice(index, 1);
};
const onAddCondition = () => {
  props.node!.expressionList.push({ property: null, condition: null, value: null });
};
const conditionTypeName = computed(() => {
  return props.node!.isAnd ? "且" : "或";
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}

.condition-type {
  position: absolute;
  left: 5px;
  font-size: 14px;
  cursor: pointer;
  top: calc(50% - 10px);
  background-color: #ffffff;
  z-index: 1000;
}

.condition-line {
  position: absolute;
  left: 11px;
  top: 0px;
  bottom: 0px;
  border: 1px solid #eae9e9;
}

.condition {
  margin-left: 25px;
}

.condition-item {
  display: flex;
}

.condition-item:hover {
  background-color: #f1f2f3;
}

.condition-item:hover .condition-item-menu-item {
  display: inline-block;
}

.condition-item-property {
  padding: 5px;
}

.condition-item-condition {
  padding: 5px;
}

.condition-item-value {
  padding: 5px;
}

.condition-item-menu {
  padding: 5px;
  color: #ee7b7b;
  line-height: 28px;
  cursor: pointer;
  width: 80px;
}

.condition-item-menu-item {
  display: none;
}

.condition-button {
  text-align: center;
}
</style>
